import { Component } from "react"
class App extends Component {
  state = {
    count: 0,
    obj: { name: 'wx' },
    tpl: <h2>我是语法糖，jsx对象，是虚拟dom</h2>,
    // parentFn: function () {
    //   console.log('我是父组件中的方法', this)
    // }
    parentFn: (data) => {
      console.log('子组件传给来的值', data)
      this.setState({
        count: data
      })
    }
  }
  render () {
    return (
      <div>
        <h1>父组件{this.state.count}</h1>
        <FnSon count={this.state.count} obj={this.state.obj} tpl={this.state.tpl} parentFn={this.state.parentFn}></FnSon>
        <ClassSon count={this.state.count}></ClassSon>
        {/*  parentFn={this.state.parentFn}>如果这里加了(),则传到子组件的是一个值 */}
      </div>
    )
  }
}
/**
 * 父传子
 * props是只读对象，
 * 单向数据流，自顶而下的数据流
 * 表示：父组件的数据通过props传给子，父更新，子就更新
 * 可以传递任意数据
 * 
 */
/**
 * 子传父
 * vue中 借助自定义事件，调用父组件中方法，改数据
 * 父组件中，<Son @eventName = 'callback'></Son>
 * 子组件：this.$emit('eventName',data)=>调用父组件中的callback
 * react
 * 
 */
/**
 * 兄弟组件通信
 * 状态提升
 * 将共享的状态提升到最近的公共父组件中，由公共父组件管理这个状态
 */
function FnSon (props) {
  // 函数组件用第一个参数接收
  console.log('接受了', props.tpl)
  return (
    <div>
      <h2>函数子组件</h2>
      <h3>{props.count}</h3>
      <ul>
        {/* 小胡子里面不能写对象 */}
        <li>{props.obj.name}</li>
        <li>{props.tpl}</li>
        <button onClick={() => {
          props.parentFn(1000)
        }}> 点击</button>
        {/* 调用者是props，所以this指向props，我们想要拿到负组件实例，所以父组件中的方法应该是箭头函数，箭头函数不能改this */}
      </ul>
    </div>
  )
}
class ClassSon extends Component {
  render () {
    // 先看下this，发现this里面右props可以拿到数据
    console.log('类子组件接收', this)
    return (
      <div>
        <h2>类子组件</h2>
        <h3>{this.props.count}</h3>
      </div>
    )
  }
}
export default App